<template>
  <view class="container">
    <uni-nav-bar left-icon="left" backgroundColor="#000" color="#fff" :title="count" :border="false" statusBar @clickLeft="goBack" />
    <view class="preview-con" v-if="!isLoading">
      <custom-swiper :height="750" :list="imgList" padding="0" :changeSwiper="changeSwiper" :curIndex="curIndex" :isAutoplay="false"></custom-swiper>

      <template v-if="imgLock">
        <view class="lock-box">
          <custom-btn class="lock-btn" @click="toUnlock">立即解锁</custom-btn>
          <template v-if="lookObj?.ci_num && lookObj?.member_num">
            <view class="c-num">将消耗1个联系名额</view>
            <view class="c-num">
              <text v-if="lookObj?.ci_num">次卡剩余{{lookObj?.ci_num}}次</text>
              <text v-if="lookObj?.member_num">，会员今日剩余{{lookObj?.member_num}}次</text>
            </view>
          </template>
          <view class="c-num" v-else>将消耗1个联系名额
            <text v-if="lookObj?.ci_num">，次卡剩余{{lookObj?.ci_num}}次</text>
            <text v-else-if="lookObj?.member_num">，会员今日剩余{{lookObj?.member_num}}次</text>
            <text v-else>，剩余0个</text>
          </view>
        </view>

        <view class="img-mask">
          <image src="@/static/common/lock.svg" mode="scaleToFill" class="img-lock" />
          <text>解锁对方联系方式后才可查看照片</text>
        </view>
      </template>
    </view>

    <!-- popup弹窗 -->
    <custom-popup></custom-popup>
  </view>
</template>
 
<script setup>
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { common, person, app } = useStore();

const count = ref("");
const imgList = ref([]);
const curIndex = ref(0);
const userId = ref("");
const imgLock = ref(false);
const lookObj = ref({});
const isLoading = ref(true);

const changeSwiper = (current) => {
  count.value = `${current + 1} / ${imgList.value.length}`;
};
const goBack = () => {
  uni.navigateBack({
    delta: 1,
  });
};
// 立即解锁
const toUnlock = () => {
  const { ci_num, member_num, allnum, advnum } = lookObj.value;
  if (!allnum || allnum == 0) {
    uni.showToast({
      title: "今日解锁资料已达上限",
      icon: "none",
    });
    return;
  }
  if (!ci_num && !member_num) {
    hasNoPhone(advnum);
  } else {
    person.getPhone(userId.value).then((data) => {
      if (data) {
        imgLock.value = false;
        updateIds();
        uni.showToast({
          title: "解锁成功",
          icon: "none",
        });
      }
    });
  }
};

// 无次数
const hasNoPhone = (advnum) => {
  const data = { isNoNum: true, advnum };
  common.updatePromptParams(data);
  common.updatePopupOpen(true, "prompt");
};

// 获取查看次数
const fetchLookNum = () => {
  app
    .fetchAllnum()
    .then((res) => {
      lookObj.value = res;
      isLoading.value = false;
    })
    .catch((err) => {
      isLoading.value = false;
    });
};

// 更新存储id
const updateIds = () => {
  const ids = { user_id: userId.value, look: imgLock.value ? 0 : 1 };
  person.updatePersonId(ids);
};

watch(
  () => common.giftStatus,
  (v) => {
    if (v) {
      fetchLookNum();
    }
  }
);

onLoad((options) => {
  const imgs = getItem("imgs") || [];
  imgList.value = imgs.map((v) => ({ img: v }));
  curIndex.value = options.cur;
  changeSwiper(Number(options.cur));

  const { user_id, look } = getItem("userIds") || {};
  userId.value = user_id;
  imgLock.value = look != 1;
  if (look != 1) {
    fetchLookNum();
  } else {
    isLoading.value = false;
  }

  // 创建激励视频广告
  common.initAdCase("preview");
});

onUnload(() => {
  updateIds();
  uni.removeStorageSync("imgs");
});
</script>
 
<style lang='scss' scoped>
.container {
  background: $uni-title-color;
  position: relative;
  .preview-con {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100vw;
    height: 100vw;
    z-index: 10;
  }

  .lock-box {
    position: absolute;
    left: 50rpx;
    bottom: -200rpx;
    text-align: center;
    width: 650rpx;
    height: 120rpx;
    background: linear-gradient(180deg, rgba(255, 92, 85, 0.9) 0%, #ff5c55 100%);
    border-radius: 120rpx 120rpx 120rpx 120rpx;
    color: #fff;
    line-height: 120rpx;
  }
  .lock-text {
    font-size: 32rpx;
    height: 40rpx;
  }
  .lock-btn {
    font-size: 40rpx;
  }

  .img-mask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 36rpx;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    .img-lock {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 26rpx;
    }
  }
}

.photo-card {
  border-radius: 30rpx;
  padding: 60rpx 56rpx;
  background: #fff;
  .d-title {
    font-weight: 800;
    font-size: 44rpx;
    color: #000;
    text-align: center;
    padding-bottom: 40rpx;
  }
  .d-top {
    font-weight: 600;
    font-size: 36rpx;
    color: #666;
    padding-bottom: 40rpx;
    text-align: center;
    line-height: 56rpx;
  }

  .d-btn {
    width: 526rpx;
    height: 116rpx;
    line-height: 120rpx;
    background: #f65952;
    border-radius: 120rpx;
    margin: 0 auto;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
    border: 4rpx solid #f65952;
  }

  .d-vip {
    background: #ffffff;
    border: 4rpx solid #f65952;
    color: #f65952;
    margin-top: 20rpx;
    font-weight: 600;
  }
}

.muban-card {
  border-radius: 30rpx;
  padding: 60rpx 56rpx;
  background: #fff;
  .d-title {
    font-weight: 800;
    font-size: 40rpx;
    color: #000;
    text-align: center;
    padding-bottom: 20rpx;
  }
  .d-top {
    font-size: 32rpx;
    color: #666;
    padding-bottom: 60rpx;
    text-align: center;
  }

  .d-btn {
    width: 526rpx;
    height: 116rpx;
    line-height: 120rpx;
    background: #f65952;
    border-radius: 120rpx;
    margin: 50rpx auto 0;
    font-weight: 500;
    font-size: 36rpx;
    color: #fff;
  }
  .d-cancel {
    text-align: center;
    padding: 50rpx;
  }
}

.c-num {
  line-height: 40rpx;
  padding-top: 20rpx;
}
</style>